<template>
     <div>

        <myheader></myheader>

      <br><br>
      <!--面包屑导航-->
      <Breadcrumb :datas="datas"></Breadcrumb>

	<section class="featured-block text-center">
		<div class="container">
      <!--富文本编辑器-->
      <!--<quill-editor ref="myTextEditor" :content="content"></quill-editor>-->

      <table>
        <tr>
          <td>商品名称</td>
          <td><input type="text" v-model="name"></td>
        </tr>

        <tr>
          <td>商品标签</td>
            <TagInput v-model="mytags" type="string" split="," placeholder="输入标签，英文逗号分隔，输入完毕回车确认"></TagInput>
        </tr>

        <tr>
          <td>商品简介</td>
          <td>
            <quill-editor ref="myTextEditor" @change="editorchange($event)" :content="desc"></quill-editor>
          </td>
        </tr>

        <tr>
          <td>颜色</td>
          <td>
              <input type="text" v-model="color">
          </td>
        </tr>
        <tr>
          <td>号码</td>
          <td>
              <input type="text" v-model="size">
          </td>
        </tr>
        <tr>
          <td>季节</td>
          <td>
              <input type="text" v-model="season">
          </td>
        </tr>

        <tr>
          <td>价格</td>
          <td>
              <input type="text" v-model="price">
          </td>
        </tr>

        <tr>
          <td><Button @click="submit" color="green">提交</Button></td>
        </tr>

      </table>

		</div>
	</section>
	<myempennage></myempennage>

  </div>

</template>

<script>
        // 导包
        import myheader from './myheader'
        import myempennage from './myempennage'
        // 导入编辑器
        import { quillEditor } from 'vue-quill-editor'

        //引入编辑器样式
        import 'quill/dist/quill.core.css'
        import 'quill/dist/quill.snow.css'
        import 'quill/dist/quill.bubble.css'

    export default {
        name: "editgood",
      data(){
          return{
            datas:[{title:'首页', route:{name:'index'}}, {title:'修改商品'}],
            name:'',
            desc:'',
            color:'',
            size:'',
            season:'',
            price:0,
            cate_id:1,
            //商品标签变量
            mytags:'',
            //商品ID
            id:'',
            //存储编辑器信息
            // content:'',
          }
      },
      // 注册组件标签
      components:{
        'myheader': myheader,
        'myempennage': myempennage,
        quillEditor
      },

        mounted:function(){
          //接收商品ID
          var id = this.$route.query.id;
          this.id = id
          //调用接口
          this.getdata();

      },
        methods: {

          //编辑器更改方法
          editorchange:function({editor, html, text}){
            this.desc = html;
            // console.log(this.desc)

          },


          // 修改
          submit:function(){


            //拼接商品规格
            var parms = {};
            parms['color'] = this.color;
            parms['size'] = this.size;
            parms['season'] = this.season;
            // console.log(parms);

            //格式化字符串
            parms = JSON.stringify(parms);
            // console.log(parms);

            //从字符串转回json
            // parms = JSON.parse(parms);
            // console.log(parms)

            // 发送请求
            this.axios.get(
              'http://127.0.0.1:8000/updategood/',{params:{id:this.id,name:this.name,desc:this.desc,parms:parms,price:this.price,cate_id:this.cate_id}}).then(res=>{
                // console.log(res);
                this.$Message(res.data.msg);

              // 只有商品入库成功才能添加标签
              if(res.data.id) {
                // 标签分类嵌套发送请求    id是商品ID  联动添加
                this.axios.get(
                  'http://127.0.0.1:8000/updatetags/', {params: {id: res.data.id, tags: this.mytags}}).then(res => {
                  // console.log(res);
                });
              }
            });


          },

        // 商品信息接口
        getdata:function(){
        this.axios.get(
          'http://127.0.0.1:8000/goodinfo/',{params:{id:this.id}}).then(res=>{
            console.log(res);
            this.name = res.data.name;
            this.desc = res.data.desc;
            this.price = res.data.price;
            this.img = res.data.img;

            //赋值
            var parms = res.data.parms;
            //字符串转换JSON类型
            parms = JSON.parse(parms);
            this.color = parms.color;
            this.size = parms.size;
            this.season = parms.season;
            this.src = 'http://127.0.0.1:8000/static/upload/' + res.data.img
            // console.log(parms);

        });
          // 发送请求 请求商品标签详情
          this.axios.get(
            'http://127.0.0.1:8000/gettags/', {params: {id: this.id}}).then(res => {
            // console.log(res);

            // 赋值
            var mytags = res.data.tags;
            // console.log(mytags);
            // list列表转换字符串
            mytags = mytags.join(',');
            this.mytags = mytags;
            console.log(mytags);
          });
        },
        }

    }
</script>

<style scoped>
.ql-editor{
  height: 300px;
}

</style>
